<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
<%@page import="com.lottery.dto.ResultDto"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>渠道商收益统计</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">
    <link href="${contextPath}/iconfont/iconfont.css" rel="stylesheet">
</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <%@include file="nav.jsp"%>


    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">渠道商收益统计</h3>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-sm-2">
                <select class="form-control" id="choose">
                    <option value="1">每期统计</option>
                    <option value="2">每天统计</option>
                </select>
            </div>
            <div class="col-sm-2">
                <div class="form-group" id="recent">
                    <label class="sr-only" for="exampleInput"></label>
                    <div class="input-group">
                        <div class="input-group-addon">最近</div>
                        <input type="text" class="form-control" id="exampleInput">
                        <div class="input-group-addon">期</div>
                    </div>
                </div>
            </div>
            <div id="container" style="min-width:400px;height:400px"></div>
        </div>
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="${contextPath}/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${contextPath}/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="${contextPath}/js/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="${contextPath}/js/sb-admin-2.min.js"></script>
<script src="${contextPath}/js/highcharts.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    $(function () {
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '收益统计'
            },
            subtitle: {
                text: ''
            },
            credits:{
                enabled: false,
            },
            xAxis: {
                categories: 
                	<%
                	ResultDto<List<String>> resultDto1 =(ResultDto<List<String>>)request.getAttribute("resultDto");
                	List<String> list1=resultDto1.getData();
					%>
					<%=list1%>
                ,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '金额 (元)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f} 元</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: 
            [
            	<%
            	ResultDto<List<String>> resultDto2 =(ResultDto<List<String>>)request.getAttribute("resultDto");
            	List<Map<String, ?>> list2=(List<Map<String, ?>>)resultDto2.getList();
            	for(int index=0;index<list2.size();index++){
					if(index==list2.size()-1){
						%>
						 {
				            name: <%="'"+list2.get(index).get("name")+"'"%>,
				            data: <%=list2.get(index).get("data")%>
				         }
						<%
					}else{
						%>
						{
			                name: <%="'"+list2.get(index).get("name")+"'"%>,
			                data: <%=list2.get(index).get("data")%>,
			         	},
               			<%
					}
                }
				%>
            ]
        });

        $("#choose").change(function(){
            var val = $(this).val();
            if(val == 1){
                editDiv('期');
                chart.update({
                    chart: {
                        type:'column'
                    },
                    xAxis: {
                        categories:
                        <%
                    	ResultDto<List<String>> resultDto3 =(ResultDto<List<String>>)request.getAttribute("resultDto");
                    	List<String> list3=resultDto3.getData();
    					%>
    					<%=list3%>
    					,
                        crosshair: true
                    },
                    series: 
                    	[
                        	<%
                        	ResultDto<List<String>> resultDto4 =(ResultDto<List<String>>)request.getAttribute("resultDto");
                        	List<Map<String, ?>> list4=(List<Map<String, ?>>)resultDto4.getList();
                        	for(int index=0;index<list4.size();index++){
            					if(index==list4.size()-1){
            						%>
            						 {
            				            name: <%="'"+list4.get(index).get("name")+"'"%>,
            				            data: <%=list4.get(index).get("data")%>
            				         }
            						<%
            					}else{
            						%>
            						{
            			                name: <%="'"+list4.get(index).get("name")+"'"%>,
            			                data: <%=list4.get(index).get("data")%>,
            			         	},
                           			<%
            					}
                            }
            				%>
                        ]
                });
            }else if(val == 2){
                editDiv('天');
                chart.update({
                    chart: {
                        type:'column'
                    },
                    xAxis: {
                        categories: 
                        	<%
                        	ResultDto<List<String>> resultDtoDay =(ResultDto<List<String>>)request.getAttribute("resultDtoDay");
                        	List<String> listDay=resultDto1.getData();
        					%>
        					<%=listDay%>
                        ,
                        crosshair: true
                    },
                    series: 
                    	[
                        	<%
                        	ResultDto<List<String>> resultDtoDay1 =(ResultDto<List<String>>)request.getAttribute("resultDtoDay");
                        	List<Map<String, ?>> listDay1=(List<Map<String, ?>>)resultDtoDay1.getList();
                        	for(int index=0;index<listDay1.size();index++){
            					if(index==listDay1.size()-1){
            						%>
            						 {
            				            name: <%="'"+listDay1.get(index).get("name")+"'"%>,
            				            data: <%=listDay1.get(index).get("data")%>
            				         }
            						<%
            					}else{
            						%>
            						{
            			                name: <%="'"+listDay1.get(index).get("name")+"'"%>,
            			                data: <%=listDay1.get(index).get("data")%>,
            			         	},
                           			<%
            					}
                            }
            				%>
                        ]
                });
            }
        });

        //on绑定事件
        $("#recent").on('change', '#exampleInput', function(){
            //获取图表类型
            var chatVal = $("#choose").val();
            //获取输入数字
            var num = $(this).val();
            
            var reg = /^\+?[1-9][0-9]*$/;
            if(!reg.test(num)){
            	notice('请输入正整数');
                dispear();
                return false;
            }else{
            	if(chatVal == 1 && num > 60){
            		notice('期数不能大于60期');
                    dispear();
                    return false;   
                }else if(chatVal == 2 && num > 30){
                	notice('天数不能大于30天');
                    dispear();
                    return false;	
                }
            }
            
            if(chatVal == 1){
                $.ajax({
                    url: "${contextPath}/WebManager/statistics/ConditionQueryExyAgency",
                    data: {chatVal: chatVal, num: num},
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                    	var expectList=data.data;
                    	var list=data.list;
                        chart.update({
                        	xAxis: {
                                categories: expectList,
                                crosshair: true
                            },
                            series: list
                        });
                    }
                })
            }else if(chatVal == 2){
                $.ajax({
                	 url: "${contextPath}/WebManager/statistics/ConditionQueryExyAgency",
                    data: {chatVal: chatVal, num: num},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                    	var dayList=data.data;
                    	var daylist=data.list;
                    	console.log(dayList);
                    	console.log(daylist);
                        chart.update({
                            xAxis: {
                                categories: dayList,
                                crosshair: true
                            },
                            series: daylist
                        });
                    }
                })
            }
        });

        //修改div
        function editDiv(param){
            var str = '';
            str += '<label class="sr-only" for="exampleInput"></label>';
            str += '<div class="input-group">';
            str += '<div class="input-group-addon">最近</div>';
            str += '<input type="text" class="form-control" id="exampleInput">';
            str += '<div class="input-group-addon">'
            str += param;
            str += '</div>';
            str += '</div>';
            $("#recent").html(str);
        }
        
        //提示信息封装函数
    	function notice(notice) {
            var str = '';
            str += '<div class="popupTip" style="padding-right:20px">';
            str += notice;
            str += '<span class="iconfont icon-quxiao remove"></span>';
            str += '</div>';
            str += '<></div>';
            //wrapper插入str
            $("#wrapper").append(str);
        }
	    //取消提示框
	    $("#wrapper").on('click', '.remove', function(){
	        $(".popupTip") .hide();
	    });

        
        function dispear(){
            setTimeout(function(){
                $(".popupTip").hide();
            }, 3000);
        }
    });

</script>

</body>

</html>
